<template>
	<view class="search" :style="{ background: `${styles.colorBg}` }">
		<view
			:style="{
				marginTop: `${styles.marginTop + 'px'}`,
				marginBottom: `${styles.marginBottom + 'px'}`,
				marginLeft: `${styles.marginLeft + 'px'}`,
				marginRight: `${styles.marginRight + 'px'}`,
				borderRadius: `${styles.circle + 'px'}`,
				background: `${styles.colorInput}`,
				textAlign:`${styles.wordStatus}`
			}"
		>
			<icon :style="{ color: `${styles.colorWord}` }" type="search" size="14" />
			<input :style="{ color: `${styles.colorWord}` }" type="text" value="" v-model="styles.text" />
		</view>
	</view>
</template>
<script>
export default {
	name: 'search',
	data(){
		return{}
	},

	props: ['styles'],
	mounted() {
		console.log(this.styles, 77);
	}
};
</script>
<style lang="scss" scoped>
.search {
	background: #f7f7f7;
	& > view:nth-child(1) {
		height: 80upx;
		border-radius: 20upx;
		padding: 20upx;
		display: flex;
		align-items: center;
		input {
			color: #c2c2c2;
			font-size: 26upx;
			margin-left: 10upx;
		}
	}
}
</style>
